import React, { useState } from 'react';

import { Form, Input, Select } from '@alifd/next';

import { valueMapLabel } from '@/utils/util';


const DhcpForm = ({ formData, interSel, onForm, dnsSel }) => {
    let [ data, onData ] = useState({...formData});

    const handleChange = ( v, e, k ) => {
        data[k] = v;
        onData({...data})
        if(k == 'dns') {
            onForm({
                ...data,
                dns: v
            })
        } else if( k == 'interface') {
            let str = valueMapLabel(interSel, v);
            let ipBase = str.split('(')[1].split(')')[0].split('/')[0].split('.').slice(0,3).join('.');
            onForm({
                ...data,
                interface: v
            })
            onData({
                ...data,
                rangeStart: ipBase + '.1',
                rangeEnd: ipBase + '.255'
            })
        }
        
    };

    const handleBlur = ( e ) => {
        onForm(a => {
            return {...a, ...data}
        })
    };

    const formConfig = [
        {
            label: 'Interface',
            content: (
                <Select 
                  value={data.interface}
                  onChange={(v,e)=>handleChange(v,e,'interface')}
                >
                    {
                        interSel.map((item,i)=> {
                            return (
                                <Select.Option
                                    label={item.label}
                                    value={item.value}
                                    key={item.value}
                                />
                            )
                        })
                    }
                </Select>
            )
        },
        {
            label: 'IP Range Start',
            content:  <Input value={data.rangeStart} onChange={(v,e)=>handleChange(v,e,'rangeStart')} onBlur={handleBlur} placeholder="IP Range Start" />
        },
        {
            label: 'IP Range End',
            content:  <Input value={data.rangeEnd} onChange={(v,e)=>handleChange(v,e,'rangeEnd')} onBlur={handleBlur} placeholder="IP Range End" />
        },
        {
            label: 'DNS Servers',
            content: (
                <Select
                  mode="multiple" 
                  value={data.dns}
                  showSearch
                  onChange={(v,e)=>handleChange(v,e,'dns')}
                >
                    {
                        dnsSel.map((item,i)=> {
                            return (
                                <Select.Option
                                    label={item.label}
                                    value={item.value}
                                    key={item.value}
                                />
                            )
                        })
                    }
                </Select>
          )
        }
    ]
    return (
    <Form labelTextAlign="left" labelCol={{span: 6}}>
        {
            formConfig.map((item,i) => {
                return (
                    <Form.Item label={item.label} key={i}>
                        {item.content}
                    </Form.Item>
                )
            })
        }
    </Form>
    )
};

export default DhcpForm;